<script setup lang="ts">
import { computed, ref } from 'vue'
import { getAssetsFiles } from '@/utils'

import { useUserStore } from '@/stores/user';

import User from './components/user.vue'
import Points from './components/points.vue'

const userStore = useUserStore()
const userInfo = ref(userStore.info)
userStore.$subscribe((_mutation, state) => {
    userInfo.value = state.info
})

const userAvatar = computed(() => {
    return userInfo.value.userImage ? userInfo.value.userImage : getAssetsFiles('origin-user.svg')
})
</script>

<template>
    <header class="head">
        <User :avatar="userAvatar" :name="userInfo.nickName" style="margin-right: 3vmin;" />
        <Points :point="userInfo.totalPoints" />
    </header>
</template>

<style scoped lang="scss">
@import url(./index.scss);
</style>